<template>
    <div class="jx_body">
      <div class="swiper-wrapper">
        <div class="swiper-slide jx_box" v-for="i in 4">
          <div class="box-header">
            <a href="http://m.suning.com?snstoreTypeCode=1002&amp;extId=1_1&amp;snstoreId=http://sale.suning.com/CMWS/zqmshx/index.html?snstoreJS=true"><img src="//uimgpre.cnsuning.com/uimg/cms/img/147368595354125988.png" alt=""></a>
          </div>
          <div class="box-list" data-ids="0000000000-000000000121359199,0000000000-000000000121359268,0000000000-000000000121347912">
            <ul class="clearfix jx_ul_0">
            <li v-for="i in 3">
              <img src="//uimgpre.cnsuning.com/uimg/cmws/catentries/000000000121359268_1_400x400.jpg" alt="" onerror="this.src=&quot;/css/images/pro-default.png&quot;">
              <a href="detail.html?cmmdtyCode=000000000121359268">
              <div class="zz"></div>
              </a>
            </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  export default {
    components: {

    },
    mounted () {
      this.$nextTick(() => {
        this.render()
        //this.xwidth = '100%'
      })
    },
    methods: {
      render () {
        var loadSwiper = setInterval(()=>{
          if (typeof Swiper != 'undefined') {
            clearInterval(loadSwiper);
            var swiper = new Swiper(this.$el, {
                slidesPerView: "auto",
                centeredSlides: true,
                loop: true,
                paginationClickable: true
            });
          }
        },500)
      }
    }
  }
</script>

<style lang="scss" scoped>
.jx_body {
    width: 15rem;
    height: 10.38rem;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
}

.jx_body .jx_box {
    height: 10.38rem;
    width: 11.14rem;
    float: left;
    padding: 0 .16rem;
    text-align: center;
    font-size: 18px;
    margin-left: 8px;
    &:first-child{
      margin-left: 10px;
    }
}

.jx_body .jx_box .box-header {
    text-align: center;
    margin: 0
}

.jx_body .jx_box .box-header img {
    width: 100%;
    height: 5.56rem
}

.jx_body .jx_box .box-list {
    width: 100%;
    background-color: #fff
}

.jx_body .jx_box .box-list li {
    display: block;
    float: left;
    width: 33%;
    height: 4rem;
    text-align: center;
    position: relative
}

.jx_body .jx_box .box-list li .zz {
    width: 3.7rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    background-color: rgba(0,0,0,0.02)
}

.jx_body .jx_box .box-list li img {
    display: block;
    margin: 0 auto;
    margin-top: .36rem;
    width: 3.28rem;
    height: 3.28rem
}
</style>
